<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>【抖音短视频】记录美好生活</title>
    <style>
        video{
            position: fixed;
            right: 0px;
            bottom: 0px;
            height: auto;
            width: auto;
           z-index: -9999;
            left: -10%;
        }
        body{
            margin: 0px;
            padding: 0px;
           overflow: hidden;
        }
        .right{
            float: right;
            color: white;
            margin-right: 200px;
            margin-top: -25px;
        }
        .bottom{
            color: white;
            font-size: 14px;
            margin: -140px;
            text-align: center;
        }
        a:visited{
            color: white;
        }
         .apple{
             border-radius: 10px;
             background-image: url("Apple-download.png");
             width: 142px;height: 51px;
             background-size: 142px 51px;
             margin-left: 640px;
         }
        .Android{
            border-radius: 10px;
            background-image: url("Android-downl.png");
            width: 142px;height: 51px;
            background-size: 142px 51px;
            margin-left: 790px;
            margin-top: -51px;
        }
        .code{
            margin-top: -51.5px;
            margin-left: 940px;
           transition: 0.3s;
            border-radius: 5px;
            width: 48px;
            height: 48px;
            background-image: url("QRcode-small.png");
            background-repeat: no-repeat;
        }

        .btn {
            width: 22px ; height: 22px ; border: 1px solid grey ;
            background-size: 22px 22px ;
        }
        .unmute { background-image: url("unmute.png") ;
                margin-left: 1180px;
            margin-top: 25px;
        }

        .mute { background-image: url("mute.png") ;
            margin-left: 1180px;
            margin-top: 25px;
        }
        .container {
            /* position 采用 absolute 表示相对于 浏览器窗口 或 第一个非static定位的父元素 进行定位 */
            position: absolute ; /* 一定要注意 .container 的定位方式是 absolute 不是 static */
            left : 0 ;
            top : 0 ;
            width: 100% ;
            height: 100% ;
        }

        .video-bg {
            /* position 采用 absolute 表示相对于 浏览器窗口 或 第一个非static定位的父元素 进行定位 */
            position: absolute ; /* 当父元素不是 static 定位时，就相对于父元素定位 */
            left: 0 ;
            top : 0 ;
            width: 100% ;
            height: 100% ;
            z-index: -250 ;
        }

        .video-tvc {
            /* position 采用 absolute 表示相对于 浏览器窗口 或 第一个非static定位的父元素 进行定位 */
            position: absolute ; /* 当父元素不是 static 定位时，就相对于父元素定位 */
            left: -10% ;
            top: 0 ;
            height: 100% ; /* 只设置视频的高度，因为视频尺寸是固定比例 */
        }

        .content {
            /* position 采用 absolute 表示相对于 浏览器窗口 或 第一个非static定位的父元素 进行定位 */
             position: absolute; /* 当父元素不是 static 定位时，就相对于父元素定位 */
            left: 0 ;
            top : 0 ;
            width: 100% ;
            height: 100% ;
            z-index: 250;
        }


    </style>
</head>
<body>
    <div class="container">
           <div class="video-bg">
            <video src="https://s3.pstatp.com/aweme/resource/web/static/image/index/tvc-v3_0b9db49.mp4" autoplay loop muted class="video-tvc"> </video>
           </div>
                <div>
                    <a href="https://www.douyin.com/">
                    <img src="douyin-logo.png" style="width: 100px;height: 45px;margin-top: 10px;margin-left: 80px" >
                    </a>
                </div>
        <div  class="right">
            创作服务平台&nbsp;&nbsp;&nbsp;
            开放平台&nbsp;&nbsp;&nbsp;
            系列产品&nbsp;&nbsp;&nbsp;
            抖音直播&nbsp;&nbsp;&nbsp;
            合作入驻&nbsp;&nbsp;&nbsp;
            企业合作&nbsp;&nbsp;&nbsp;
            联系我们&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
                            <div class="content">
                        <div class="btn unmute">  </div>
                            </div>
                             <script type="text/javascript" >
            ( function(){
                let video = document.querySelector( ".video-tvc" );
                let btn = document.querySelector( ".btn" );

                let action = function(){
                    // 如果时静音状态
                    if( video.muted ) {
                        video.muted = false ; // 让它不再沉默
                        btn.classList.remove( "unmute" ); // 为 btn 元素移除 unmute 这个 class name
                        btn.classList.add( "mute" ); // 为 btn 元素添加 mute 这个 class name
                    } else {
                        video.muted = true ; // 让它沉默
                        btn.classList.remove( "mute" ); // 为 btn 元素移除 mute 这个 class name
                        btn.classList.add( "unmute" ); // 为 btn 元素添加 unmute 这个 class name
                    }
                }

                btn.addEventListener( "click" , action , false );
            })();
        </script>
        <div style="text-align: right;margin: 245px;margin-right: 120px;line-height: 90px">
           <img src="douyin-word.png" style=" width: 450px;height: 79.92px"><br>
                        <div class="apple">
                        <a href="https://apps.apple.com/cn/app/%E6%8A%96%E9%9F%B3%E7%9F%AD%E8%A7%86%E9%A2%91/id1142110895?l=zh&ls=1">
                       <!-- <img src="Apple-download.png" style="width: 142px;height: 51px">-->
                         </a>&nbsp;&nbsp;&nbsp;
                        </div>
                         <a href="http://s.toutiao.com/UsMYE/">
                                         <div class="Android">
                <!--    <a href="http://s.toutiao.com/UsMYE/">
                 <img src="Android-downl.png" style="height:51px;width: 142px ">
                                        </a>-->
                                         </div>
                         </a>
                            <div class="code" style="color: white">

                            </div>
         </div>

            <div class="bottom">
                | 音乐 |用户服务协议 | 隐私政策 | 账号找回 |广告投放 | 营业执照 |<br>
                2020 © 抖音  | 京ICP备16016397号-3 | 北京微播视界科技有限公司 |  京B2-20170846<br>
                中国互联网举报中心 | 网络文化许可证-京网文-（2016）2282-264号 | 客户服务热线：400-992-2556 | 违法和不良信息举报：400-140-2108 | 举报邮箱：jubao@douyin.com<br>
                <img src="douyin-beian.png">京公网安备 11010802023605号 |  地址 : 北京市海淀区知春路51号4层408
            </div>
    </div>
</body>
</html>